<template>
  <div class="px-4 h-full flex flex-col overflow-hidden">
    <div class="flex justify-between items-center py-2">
      <a-input-search v-model:value="searchKey" class="w-64" placeholder="床位号/姓名/助记码/住院号" @search="getData" />
      <div v-if="levelCount.length > 0 && store.tabMyPatientShowType !== 1" class="flex border border-dashed border-gray-300 rounded-full px-12 py-1">
        <a-space :size="20">
          <div v-for="level in levelCount" :key="level" class="flex-center">
            <div class="py-1 w-6 text-center rounded text-white" :style="{ background: nursingGrade[level.iconCode] }">{{ level.iconCode }}</div>
            <span class="font-bold ml-1"> {{ level.hzs || 0 }}人</span>
          </div>
        </a-space>
      </div>
      <div class="flex items-center">
        <div>隐藏空床</div>
        <a-switch v-model:checked="store.cardSwitch" class="ml-1 mr-3" @change="getData" />
        <BaseExport
          type="住院"
          name="我的病人"
          code="000098"
          :search-params="{ statuss: [0, 2], bqbh: store.areaCode, pyjm: searchKey, empId: storeUser.empId, hiddenEmptyBed: store.cardSwitch }"
          class="ml-2"
        >
          导出
        </BaseExport>
      </div>
    </div>
    <BaseTable
      v-if="store.tabMyPatientShowType === 1"
      column-code="000098"
      :scroll="{ x: 2600 }"
      :data-source="tableData"
      fill
      :loading="loading"
      :custom-row="customRow"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex === 'xh'">
          {{ index + 1 }}
        </template>
        <template v-if="column.dataIndex === 'status'">
          <a-tag v-if="record.status === 0" color="blue">正常</a-tag>
          <a-tag v-if="record.status === 2" color="green">出院</a-tag>
        </template>
        <template v-if="column.dataIndex === 'brName'">
          <InPatientPopover :patient-info="record" @change="getData">
            <div class="cursor-pointer text-primary hover:underline">{{ record.brName }}</div>
          </InPatientPopover>
        </template>
      </template>
    </BaseTable>
    <div v-else class="flex flex-1 overflow-hidden">
      <div v-if="tableData.length" class="h-full w-full flex flex-wrap overflow-y-auto content-start">
        <template v-for="item in tableData" :key="item?.inplsh">
          <a-dropdown v-if="item?.brName" class="h-fit" trigger="contextmenu">
            <BedCard
              class="m-2"
              :data="item"
              show-footer
              :active="currentBed?.inplsh === item?.inplsh"
              @click="onRightClick(item)"
              @dblclick="onRightdbClick(item)"
              @change="getData"
            />
          </a-dropdown>
          <a-dropdown v-else class="h-fit" trigger="contextmenu">
            <BedCardEmpty class="m-2" :bed-code="item?.cwh" :room-name="item.roomName" />
          </a-dropdown>
        </template>
      </div>
      <div v-else class="w-full h-full flex-center">
        <a-empty />
      </div>
      <a-spin v-if="loading" :spinning="loading" class="w-full h-full flex-center absolute" />
    </div>
  </div>
</template>
<script setup>
import { ref, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
import BaseTable from '@/components/BaseTable'
import InPatientPopover from '@/components/InPatientPopover'
import BedCard from '@/components/business/BedCard'
import { nursingGrade } from '@/utils/enums'
import userStore from '@/store/user.js'
import useStore from '../../store'

const store = useStore()
const router = useRouter()
const storeUser = userStore()
const searchKey = ref('')
const currentBed = ref({})
const levelCount = ref([])
const { loading, tableData, getData } = useTable({
  url: '/inp/zydj/getInpRecordList',
  immediate: true,
  pagination: false,
  formatParams: () => {
    return {
      // store.tabsKey
      statuss: [0, 2],
      bqbh: store.areaCode,
      pyjm: searchKey.value,
      empId: storeUser.empId,
      hiddenEmptyBed: store.cardSwitch
    }
  },
  onSuccess: () => {
    tableData.value.forEach((item) => (item.openPopover = false))
  }
})

const onRightClick = (bed) => {
  currentBed.value = bed
}

const customRow = (record) => {
  return {
    onDblclick: () => {
      onRightdbClick(record)
    }
  }
}

// 双击事件
const onRightdbClick = (item) => {
  router.push({
    path: '/in-doctor/workstation',
    query: {
      inplsh: item.inplsh
    }
  })
}
const getLevelCount = async () => {
  const { code, data } = await get('/inp/zyhs/getPatientCountbyNursingGradeList?bqbh=' + store.areaCode)
  if (code === 0) {
    levelCount.value = data
  }
}
watchEffect(() => {
  getLevelCount()
})
</script>
